<template>
    <div class="login-page">
        <div class="left"><h2>张若虚 ·《 春江花月夜 》</h2>
            <p class="line">「江水流春去欲尽 江潭落月复西斜」</p>
        </div>
        <div class="login-box">
            <h1>登录</h1>
            <h2>dēng lù</h2>
            <el-form label-width="80px" :model="formLabelAlign" :rules="rules" ref="ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formLabelAlign.username" placeholder="username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formLabelAlign.password" type="password" placeholder="password"></el-input>
                </el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                formLabelAlign: {
                    username: '',
                    password: ''
                },
                username: '',
                password: '',
                from: this.$route.query.from,
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            login() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$resource('/api/login', null, null, {emulateJSON: true}).save(this.formLabelAlign).then(res => {
                            let token = res.data.data;
                            localStorage.setItem("token", token);
                            if (this.from) {
                                this.$router.push(this.from);
                            } else {
                                this.$router.push('/index');
                            }
                        }, e => {
                            alert(e.body)
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .login-page {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
        transition: all 0.9s ease 0s;
    }

    .login-box {
        text-align: center;
        max-width: 500px;
        color: #ffffff;
        display: flex;
        flex-grow: 2;
        flex-direction: column;
        justify-content: space-around;
        -webkit-box-align: center;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.5) 0 0 8px;
        position: relative;
        cursor: default;
        border-radius: 6px;
        padding: 1rem 0.4rem;
    }

    .login-box > h1 {
        font-family: "TChinese", serif;
    }

    .login-box > h2 {
        text-transform: capitalize;
        font-size: 1.5rem;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        position: absolute;
        right: 0.4rem;
        top: 0.8rem;
        color: inherit;
        font-family: 'Songti SC', sans-serif;
    }

    .left {
        /*box-shadow: rgba(0, 0, 0, 0.5) 0 0 8px;*/
        /*border-radius: 6px;*/
        display: flex;
        align-self: flex-end;
        line-height: 1.4;
        margin-top: 1rem;
        text-shadow: rgba(33, 33, 33, 0.6) 0 0 4px;
        padding: 0.4rem;
        animation: 1s ease 0s 1 normal forwards running hbOYnO;
        font-family: "TChinese", serif;
        font-size: 0.8rem;
    }

    .left > h2 {
        color: inherit;
        align-self: flex-end;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        margin-right: 0.3rem;
    }

    .left .line {
        color: inherit;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        letter-spacing: 0.14rem;
        font-weight: bold;
    }
</style>
